<template>
  <div class="login" id="login-app">
    <div class="login-box">
      <img
        style="border-top-left-radius: 10px; border-bottom-left-radius: 10px"
        src="@/assets/bg002.png"
        alt=""
      />
      <a-form :model="requestParam" name="normal_login" class="login-form">
        <h1 style="margin-bottom: 60px">后台系统</h1>
        <a-form-item label="username" name="username">
          <a-input v-model:value="requestParam.username">
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item label="password" name="password">
          <a-input-password v-model:value="requestParam.password">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item style="text-align: center">
          <a-form-item name="remember" no-style>
            <a-checkbox v-model:checked="requestParam.remember"
              >记住我?
            </a-checkbox>
          </a-form-item>
        </a-form-item>

        <a-form-item style="text-align: center">
          <a-button
            :loading="loading"
            type="primary"
            html-type="submit"
            class="login-form-button"
            @click="login"
          >
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
import $td from "@/components/td";
import { message } from "ant-design-vue";
import { ref } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import Cookies from "js-cookie";
import { useRouter } from "vue-router";

let router = useRouter();

let requestParam = ref<any>({
  username: "",
  password: "",
  remember: false,
  authType: "admin",
});

const loading = ref<boolean>(false);

const getCookie = () => {
  requestParam.value.username = Cookies.get("td-username") || "";
  requestParam.value.password = $td.decrypt(Cookies.get("td-password")) || "";
  requestParam.value.remember = Cookies.get("td-remember") === "true";
};

const initCookie = () => {
  if (requestParam.value.remember) {
    Cookies.set("td-username", requestParam.value.username, {
      expires: 30,
    });
    Cookies.set("td-password", $td.encrypt(requestParam.value.password), {
      expires: 30,
    });
    Cookies.set("td-remember", requestParam.value.remember, {
      expires: 30,
    });
  } else {
    Cookies.remove("td-username");
    Cookies.remove("td-password");
    Cookies.remove("td-remember");
  }
};
getCookie();
let login = () => {
  if (
    requestParam.value.username === "" ||
    requestParam.value.password === ""
  ) {
    message.error("用户名或密码不能为空");
    return;
  }
  loading.value = true;

  $td.request
    .request({
      url: "/login",
      method: "post",
      data: requestParam.value,
    })
    .then((res: any) => {
      loading.value = false;

      initCookie();
      $td.setToken(res.data);

      $td.message.success("登录成功");

      router.push("/admin/");
    })
    .catch((err: any) => {
      loading.value = false;
      console.log(err);
    });
};
</script>

<style less>
.body {
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 1366px;
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /* background-color: #333; */
  background-image: url(../../../assets/bg1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  width: 100vw;
}

.login-box {
  width: 1000px;

  height: 474.38px;
  border-radius: 8px;
  display: flex;
}

.login-box img {
  width: 60%;
  height: auto;
  border-radius: 20px;
  margin-left: 10px;
}

.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  background: #ffffff;
  width: 40%;
  border-radius: 0px 8px 8px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px;
}

.ant-form-item {
  width: 80%;
}
</style>
